<template>
  <div class="yeye">
    <!-- 轮播图开始 -->
    <div class="smlunbotu">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in GetImgList" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图结束 -->
    <!-- 购买商品区域开始 -->
    <div class="purchase">
      <div class="title">{{GoodsLnformation.title}}</div>
      <hr />
      <div>
        <span class="huise">市场价：</span>
        <span class="black huise">￥{{GoodsLnformation.market_price}}</span>
        <span class="red">销售价：￥{{GoodsLnformation.sell_price}}</span>
      </div>
      <!-- 购买数量和加入购物车模块开始 -->
      <div class="jiage">
        <span class="huise">购买数量</span>
        <van-stepper v-model="value" @plus="zenjia()" class="number" min="1" />
      </div>
      <van-button class="bulebutton yingyin" type="info">立即购买</van-button>
      <van-button class="yingyin" type="danger" @click="getCart(GoodsLnformation,value)">加入购物车</van-button>
      <!-- 购买数量和加入购物车模块结束 -->
    </div>
    <!-- 购买商品区域结束 -->
    <!-- 商品参数模块开始 -->
    <div class="purchase">
      <div class="title">商品参数</div>
      <hr />
      <div class="canshu huise">
        <span>商品货号：</span>
        <span>{{GoodsLnformation.goods_no}}</span>
      </div>
      <div class="canshu huise">
        <span>库存情况：</span>
        <span>{{GoodsLnformation.stock_quantity}}</span>
      </div>
      <div class="canshu huise">
        <span>上架时间：</span>
        <span>{{GoodsLnformation.add_time | dateFormat}}</span>
      </div>
      <!-- 图文介绍和商品评论区域开始 -->
      <hr />
      <van-button class="jeishaoImg" plain type="info" @click="toPicIntro(GoodsLnformation.id)">图文介绍</van-button>
      <van-button
        class="jeishaoImg"
        plain
        type="danger"
        @click="toCommentPage(GoodsLnformation.id)"
      >商品评论</van-button>
      <!-- 图文介绍和商品评论区域结束 -->
    </div>
    <!-- 商品参数模块结束 -->
  </div>
</template>
           
<script>
import { GetImg_api } from '../../api/index'
import { GoodsLnformation_api } from '../../api/index'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      value: 1,
      id: this.$route.params.id,
      // 轮播图图片数组
      GetImgList: [],
      //商品参数，价格，标题数组
      GoodsLnformation: {}
    }
  },
  created() {
    this.GetImg(this.$route.params.id)
    this.Getgoods(this.$route.params.id)
  },
  computed: {
    // ...mapState(['shopNumber', 'ChoiceNumber'])
  },
  methods: {
    // 获取小轮播图数据
    async GetImg(id) {
      const { data: res } = await GetImg_api(id)
      this.GetImgList = res.message.map(value => {
        return value.src
      })
      // console.log(this.GetImgList);
    },
    // 获取商品参数，价格,标题数据
    async Getgoods(id) {
      const { data: res } = await GoodsLnformation_api(id)
      this.GoodsLnformation = res.message[0]
      // console.log(this.GoodsLnformation, 77777777777777)
    },
    //增加购物车数量
    getCart(goodsInfo, count) {
      this.$store.commit('add2GoodsList', { id: goodsInfo.id, count, price: goodsInfo.sell_price })
      // this.$store.commit('getCart')
      // localStorage.setItem('number', this.shopNumber)
      // localStorage.setItem('cartid', this.$route.params.id)
      // this.$store.commit('pushchartListId')
    },
    zenjia() {
      // this.$store.commit('getCartNumberadd')
    },
    // To商品评论
    toCommentPage(id) {
      this.$router.push(`/goodsComment/${id}`)
    },
    // To图文介绍
    toPicIntro(id) {
      this.$router.push(`/goodsDetail/${id}`)
    }
  }
}
</script>
<style scoped>
.yeye {
  box-sizing: border-box;
  padding: 10px 10px 50px 10px;
}
.smlunbotu {
  box-sizing: border-box;

  width: 100%;
  height: 300px;
  border: 1px solid #cccccc;
  padding: 10px;
}
.smlunbotu img {
  box-sizing: border-box;
  width: 40%;
  height: 280px;
  margin: 0px 0px 8px 165px;
}
.purchase {
  box-sizing: border-box;
  width: 100%;
  /* height: 200px; */
  border: 1px solid #cccccc;
  margin: 10px 0;
  padding: 10px;
}
.red {
  color: red;
  font-size: 16px;
  margin-left: 15px;
  font-weight: 700;
}
.black {
  font-size: 14px;
  text-decoration: line-through;
  margin-right: 10px;
}
.title {
  font: normal 700 16px '微软雅黑';
}
.canshu {
  margin-bottom: 15px;
}
.huise {
  font: normal 400 14px '微软雅黑';
  color: #888;
}
.jeishaoImg {
  width: 100%;
  height: 40px;
  margin-bottom: 15px;
}
.number {
  display: inline-block;
  margin: 10px 20px;
}
.bulebutton {
  margin-right: 15px;
}
.yingyin {
  box-shadow: 1px 1px 1px 1px;
}
.jiage {
  margin: 10px 0px 20px 0px;
}
</style>